<template>
    <div style="width: 100%;position: relative;height: 100%;">
        <div id="search">
            <el-row>
                <el-form :model="listQuery" :label-position="labelPosition" :inline="true" ref="formQuery"
                         label-width="70px">
                    <el-col :span="6">
                        <el-form-item label="病人名字" prop="name">
                            <el-input size="small" style="width: 80%" v-model="listQuery.name" placeholder="请输入病人名称"
                                      clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item style="float: right">
                            <el-button size="small" type="success" icon="el-icon-plus" @click="handleAdd"></el-button>
                            <el-button size="small" type="primary" icon="el-icon-search" @click="search"></el-button>
                            <el-button size="small" @click="resetQuery('formQuery')">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>

        </div>
        <div id="table">
            <el-table border :data="list" style="width: 100%" v-loading="loading">
                <el-table-column type="index" width="65" label="#序号" align="center"/>
                <el-table-column prop="name" width="190" label="病人名" align="center"/>
                <el-table-column prop="idCard" label="身份证" width="200" align="center"/>
                <el-table-column prop="phone" label="电话" width="160" align="center"/>
                <el-table-column prop="age" label="年龄" width="80" align="center"/>
                <el-table-column label="拿药状态" width="140" align="center">
                    <template slot-scope="scope">
                            <el-tag v-if="scope.row.orderStatus == 2" type="success">已取药</el-tag>
                            <el-tag v-if="scope.row.orderStatus == 1" type="info">待取药</el-tag>
                            <el-tag v-if="scope.row.orderStatus == 0" type="danger">未拿药</el-tag>
                            <el-tag v-if="scope.row.orderStatus == -1" >滞后</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope" >
                        <el-tooltip v-if="scope.row.orderStatus == 1 || scope.row.orderStatus == 2"  class="item" effect="dark" content="药品信息" placement="top-start">
                            <el-button size="small" type="text" icon="el-icon-view"
                                       @click="handleDrugDetail(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip v-if="scope.row.orderStatus == 0"  class="item" effect="dark" content="拿药" placement="top-start">
                            <el-button size="small" type="text" icon="el-icon-plus"
                                       @click="handleAddDrug(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                            <el-button size="small" type="text" icon="el-icon-edit"
                                       @click="handleEdit(scope.row)"></el-button>
                        </el-tooltip>

                     <el-tooltip v-if="scope.row.orderStatus == 1"  class="item" effect="dark" content="取药" placement="top-start">
                        <el-button size="small" type="text" icon="el-icon-wallet"
                                   @click="takeDrug(scope.row)"></el-button>
                      </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block" style="margin-top: 10px;position: absolute;right: 0;">
                <el-pagination :page-sizes="[10]" :page-size="listQuery.pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>


        <!--新增或修改框-->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" width="40%">
            <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="80px">
                <el-form-item label="病人名称" prop="name">
                    <el-input size="small" v-model="form.name" placeholder="请输入病人名称"
                               style="width: 70%;"/>
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard" v-if="dialogStatus != 'update'?true:false">
                    <el-input size="small" v-model="form.idCard" placeholder="请输入身份证"  style="width: 70%;"
                    />
                </el-form-item>
                <el-form-item label="电话号码" prop="phone">
                    <el-input size="small" style="width: 70%;"  v-model="form.phone" placeholder="请输入电话号码"/>
                </el-form-item>
              <el-form-item label="年龄" prop="age">
                <el-input size="small" style="width: 70%;" v-model="form.age" placeholder="请输入电话号码"/>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="submit('form')">确定</el-button>
            </div>
        </el-dialog>

        <!-- 拿药对话框 -->
        <el-dialog title="拿药" :visible.sync="drugDialogVisible" width="70%">
            <el-form :model="drug" :label-position="labelPosition" :inline="true" ref="drug">
                <el-form-item label="病人名字:" prop="name">
                    <el-input size="small" style="width: 70%" v-model="drug.username"  disabled
                            clearable></el-input>
                </el-form-item>
                <el-form-item label="电话：" prop="phone">
                    <el-input size="small" style="width: 80%" v-model="drug.phone"  disabled
                            clearable></el-input>
                </el-form-item>
                <el-form-item label="身份证号:" prop="idCard">
                    <el-input size="small" style="width: 100%" v-model="drug.idCard"  disabled
                            clearable></el-input>
                </el-form-item>
            </el-form>
            <el-divider><span>药品信息</span></el-divider>

            <div id="drug-transfer">
                <el-row>
                    <el-col :span="24" :offset="4">
                        <el-transfer  :props="{key: 'drugInfoId',label: 'drugName'}" v-model="transferValue" :data="transferData"  :titles="['药品', '已选药品']"></el-transfer>
                    </el-col>
                </el-row>
                <el-divider><span>药品</span></el-divider>
                <el-row>
                    <el-col :span="12" offset="5">
                        <el-card class="box-card" width="50%" shadow="never">
                            <div slot="header" class="clearfix">
                                <span>填写药品数量</span>
                                <el-button style="float: right; padding: 3px 0" type="text">提交</el-button>
                            </div>
                            <el-form :model="drugNumList" :label-position="labelPosition" label-width="120px">
                                <div v-for="(item,index) in selectedDrug" :key="item.drugId" class="text item">
                                    <el-form-item :label="item.drugInfoName" prop="name">
                                        <el-input size="small" style="width: 50%" v-model="drugNumList[index]" placeholder="请输入数量"
                                        clearable></el-input>
                                    </el-form-item>
                                </div>   
                            </el-form>
    
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        
            <span slot="footer" class="dialog-footer">
                <el-button @click="drugDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitDrugOrder">提交</el-button>
            </span>
        </el-dialog>

        <el-dialog title="药品信息" :visible.sync="dialogDetailVisible" width="50%">
            <el-row>
                <el-col :span="8" v-for="item in patientDrugList" :key="item.id">
                    <el-card class="box-card" width="180px;">
                        <div>
                            <span>药品名称：</span>
                            <span style="margin-right:10px">{{item.drugName}}</span>
                        </div>
                    <div>
                        <span>药品数量：</span>
                        <span>{{item.drugNumber}}</span>
                    </div>
                    </el-card>
            
                </el-col>
            </el-row>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "patient",
        data() {
            return {
                patientDrugList: [],
                dialogDetailVisible:false,
                selectPatientId:undefined,
                drugNumList: [],
                selectedDrug:[],
                transferValue:[],
                transferData: [],
                drug:{},
                labelPosition: 'left',
                listQuery: {
                    pageNum: 1,
                    pageSize: 10
                },
                drugDialogVisible:false,
                loading: true,
                list: [],
                total: undefined,
                dialogVisible: false,
                form: {
                    id: undefined
                },
                dialogStatus: "",
                textMap: {
                    update: "编辑病人",
                    create: "新增病人"
                },
            }
        },
        watch:{
            transferValue(newValue,oldValue){
               this.selectedDrug = [];
               for(var i = 0;i <newValue.length; i++){
                   for(var j = 0; j<this.transferData.length; j++){
                       if(this.transferData[j].drugInfoId == newValue[i]){
                        this.selectedDrug.push({
                            drugId: this.transferData[j].drugInfoId,
                            drugInfoName :this.transferData[j].drugName
                        });
                       }
                   }
               }
            //console.log(this.selectedDrug);
            }
        },
        methods: {
            //取药
            takeDrug(row){
                this.$get("/drugOrder/changeStatus",{patientId: row.id,status: 2}).then(res=>{
                    if(res.code == 200){
                        this.$message.success("取药成功");
                        ths.getList();
                    }else{
                        this.$message.error("取药失败");
                    }
                })
            },
            //提交病人药单
            submitDrugOrder(){
                //console.log(this.drugNumList);
                //console.log(this.selectedDrug);
                var drugOrders = [];
                if(this.drugNumList.length <= 0 || this.selectedDrug.length <= 0){
                    this.$message.warning("请填写必要信息");
                    return;
                }
                for(var i =0; i<this.drugNumList.length; i++){
                    var order = {
                        drugId : this.selectedDrug[i].drugId,
                        drugNumber: this.drugNumList[i]
                    };
                    drugOrders.push(order);
                }
                var data = {
                    patientId : this.selectPatientId,
                    orderList : drugOrders
                }
                this.$post("/drugOrder/submitDrugOrder",data).then(res=>{
                    if(res.code == 200){
                        this.$message.success("操作成功");
                        this.drugDialogVisible = false;
                        this.getList();
                    }else{
                        this.$message.error(res.msg);
                    }
                })

            },
            //病人拿药
            handleAddDrug(row){
                this.drug.patientId = row.id;
                this.drug.username = row.name;
                this.drug.idCard = row.idCard;
                this.drug.age = row.age;
                this.drug.phone = row.phone;
                this.selectPatientId = row.id;
                this.getDrugList();
                this.drugDialogVisible =true;
            },
            //获取列表
            getList() {
                this.$post("/patient/list", this.listQuery).then(res => {
                    if (res.code == 200) {
                        this.loading = false;
                        this.list = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            //删除
            handleDelete(row){
                this.$confirm('此操作删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$get('/user/delete', {userId: row.id}).then(res => {
                    //console.log(res);
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                        this.getList();
                    }else{
                        this.$message.error(res.msg);
                    }
                    });
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                    });          
                });ß
            },
            //查询
            search() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            //新增
            handleAdd() {
                this.dialogStatus = "create";
                this.form = {};
                this.dialogVisible = true;
            },
            //编辑
            handleEdit(row) {
                this.dialogStatus = "update";
                this.$get('/patient/getDetail', {patientId: row.id}).then(res => {
                    //console.log(res);
                    if (res.code == 200) {
                        this.form = res.data;
                    }
                })
                this.dialogVisible = true;
            },
            getDrugList(){
                this.$get('/drug/getDrugList').then(res => {
                    if (res.code == 200) {
                        //this.form = res.data;
                        this.transferData = res.data;
                    }
                })
            },
            //提交
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$post("/patient/save", this.form).then(res => {
                            if (res.code == 200) {
                                this.$message.success("操作成功");
                                //关闭对话框
                                this.dialogVisible = false;
                                //重新渲染数据
                                this.getList();
                            }
                            else {
                                this.$message.error(res.msg);
                            }
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //清空搜索条件
            resetQuery(formName) {
                this.$refs[formName].resetFields();
            },
            //分页改变
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            //查看病人药品信息
            handleDrugDetail(row){
                this.$get("/drugOrder/orders",{patientId:row.id}).then(res=>{
                    if(res.code == 200){
                        this.patientDrugList = res.data;
                        this.dialogDetailVisible = true;
                    }
                })
            }
        },
        created() {
            this.getList();
        }
    }
</script>

<style scoped>
    #table {
        padding: 0 20px;
    }

    #search {
        padding: 20px;
    }
    .item{
        margin-left: 10px;
    }
    #drug-transfer{
       

    }

</style>
